import React, { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './document.css';

interface NavItem {
  id: string;
  label: string;
  icon: string;
  path: string;
  badge?: string;
  children?: NavItem[];
}

interface SidebarProps {
  activeItem?: string;
}

const Sidebar: React.FC<SidebarProps> = ({ activeItem }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const [expandedItems, setExpandedItems] = useState<string[]>([
    'knowledge-base',
  ]);

  const navItems: NavItem[] = [
    {
      id: 'home',
      label: '首页',
      icon: '🏠',
      path: '/app/document',
    },
    {
      id: 'shared',
      label: '共享',
      icon: '🔗',
      path: '/app/document/shared',
    },
    {
      id: 'favorites',
      label: '收藏',
      icon: '⭐',
      path: '/app/document/favorites',
    },
    {
      id: 'my-docs',
      label: '我的文档',
      icon: '📁',
      path: '/app/document/my-docs',
    },
    {
      id: 'team-files',
      label: '团队文件',
      icon: '👥',
      path: '/app/document/team-files',
      badge: '来自钉盘',
    },
    {
      id: 'knowledge-base',
      label: '知识库',
      icon: '📚',
      path: '/app/document/knowledge-base',
      children: [
        {
          id: 'new-knowledge-base',
          label: '+ 新建知识库',
          icon: '➕',
          path: '/app/document/knowledge-base/new',
        },
      ],
    },
  ];

  const toggleExpanded = (itemId: string) => {
    setExpandedItems(prev =>
      prev.includes(itemId)
        ? prev.filter(id => id !== itemId)
        : [...prev, itemId]
    );
  };

  const handleItemClick = (item: NavItem) => {
    if (item.children) {
      toggleExpanded(item.id);
    } else {
      navigate(item.path);
    }
  };

  const isActive = (path: string) => {
    return (
      location.pathname === path || (activeItem && path.includes(activeItem))
    );
  };

  const renderNavItem = (item: NavItem, level: number = 0) => {
    const isExpanded = expandedItems.includes(item.id);
    const hasChildren = item.children && item.children.length > 0;
    const isItemActive = isActive(item.path);

    return (
      <div key={item.id}>
        <div
          className={`nav-item ${isItemActive ? 'active' : ''} ${level > 0 ? 'sub-item' : ''}`}
          onClick={() => handleItemClick(item)}
          style={{ paddingLeft: `${level * 20 + 16}px` }}
        >
          <div className='nav-item-content'>
            <span className='nav-icon'>{item.icon}</span>
            <span className='nav-label'>{item.label}</span>
            {item.badge && <span className='nav-badge'>{item.badge}</span>}
            {hasChildren && (
              <span className={`expand-icon ${isExpanded ? 'expanded' : ''}`}>
                {isExpanded ? '▼' : '▶'}
              </span>
            )}
          </div>
        </div>
        {hasChildren && isExpanded && (
          <div className='sub-items'>
            {item.children!.map(child => renderNavItem(child, level + 1))}
          </div>
        )}
      </div>
    );
  };

  return (
    <div className='sidebar'>
      <div className='sidebar-header'>
        <div className='logo'>
          <span className='logo-icon'>📄☁️</span>
          <div className='logo-text'>
            <div className='logo-title'>兔飞猛进文档</div>
            <div className='logo-subtitle'>4舍女生 (人工、传媒)</div>
          </div>
        </div>
      </div>

      <nav className='nav-menu'>
        {navItems.map(item => renderNavItem(item))}
      </nav>

      <div className='sidebar-footer'>
        <div className='nav-item'>
          <div className='nav-item-content'>
            <span className='nav-icon'>⋯</span>
            <span className='nav-label'>更多</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;
